﻿@using Cl.Blog.Model
@model IEnumerable<Category>
@{
    ViewBag.Title = "分类管理";
}
@section Style{}
<ul id="ztree" class="ztree col-md-2 col-lg-2"></ul>
<div class="col-md-10 col-lg-10">
    <button class="btn btn-default navbar-btn" data-toggle="modal" data-target="#AddCategory" onclick="Add_click()">
        <i class="glyphicon glyphicon-plus"></i>添加
    </button>
    <div id="search">
        <div>
            <label for="SearchName" class="control-label text-center">名称</label>
            <input type="text" class="text form-control" id="SearchName" name="SearchName" placeholder="名称" />
        </div>
        <div>
            <label for="SearchAlias" class="control-label text-center">别名</label>
            <input type="text" class="text form-control" id="SearchAlias" name="SearchAlias" placeholder="别名" />
        </div>
        <div>
            <label for="SearchPId" class="control-label text-center">父分类</label>
            <select id="SearchPId" name="SearchPId" class="selectpicker show-tick"></select>
        </div>
        <div>
            <label for="SearchStartTime" class="control-label text-center">发布时间</label>
            <input size="16" id="SearchStartTime" name="SearchStartTime" type="text" readonly class="form_datetime form-control" />
            <label for="SearchEndTime" class="control-label text-center">~</label>
            <input size="16" id="SearchEndTime" name="SearchEndTime" type="text" readonly class="form_datetime form-control" />
        </div>
        <button class="btn btn-default navbar-btn" onclick="Search('/Manager/Category/List')">
            <i class="glyphicon glyphicon-zoom-in"></i>查询
        </button>
        <button class="btn btn-default navbar-btn" onclick="Reset()">
            <i class="glyphicon glyphicon-repeat"></i>重置
        </button>
    </div>

    <table id="list" class="table table-bordered">
        <thead>
            <tr>
                <th>名称</th>
                <th>别名</th>
                <th>排序</th>
                <th>父Id</th>
                <th>编辑</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div id="pageDetail" style="text-align: center;"></div>
</div>

@section Modal{
    @*@using (Html.BeginForm("Add", "Category", FormMethod.Post))*@
    @using (Ajax.BeginForm("Add", "Category", new AjaxOptions() { HttpMethod = "post", OnBegin = "return Validate()", OnSuccess = "SaveSuccess" }))
    {
        <div class="modal fade" id="AddCategory" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">添加新分类</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="Name">名称(*)</label>
                            <input type="text" class="form-control" id="Name" name="Name" placeholder="分类名称">
                        </div>
                        <div class="form-group">
                            <label for="Alias">别名</label>
                            <input type="text" class="form-control" id="Alias" name="Alias" placeholder="别名">
                        </div>
                        <div class="form-group">
                            <label for="Remark">备注</label>
                            <input type="text" class="form-control" id="Remark" name="Remark" placeholder="备注">
                        </div>
                        <div class="form-group">
                            <label for="Sort">排序</label>
                            <input type="text" class="form-control" id="Sort" name="Sort" placeholder="排序">
                        </div>
                        <div class="form-group">
                            <label for="">父分类</label>
                            <select id="PId" name="PId" class="selectpicker show-tick form-control">
                            </select>
                        </div>
                        <div class="form-group">
                            <div class="checkbox">
                                <label><input type="checkbox" id="IsNavShow" name="IsNavShow" checked="checked" value="true" onchange="checkbox_change(this)">加入导航栏菜单</label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
            <input type="hidden" id="Id" name="Id" />
        </div><!-- /.modal -->
        
    }
}
@section Script{
    <script type="text/javascript">
        var data = @Html.Raw(ViewData["data"]);
        Load(data);

        //分页加载数据
        function Load(data) {
            ReplaceParent(data.parentData, "PId,SearchPId");
            if (data.list.length == 0) {
                $("#pageDetail").css("display", "none");
                $('tbody tr').remove();
                ZTreeInit($("#ztree"), data.treeData);
                return;
            } else {
                $("#pageDetail").css("display", "block");
            }
            var pageCount = data.pageCount; //取到pageCount的值(把返回数据转成object类型)
            var pageIndex = data.pageIndex; //得到urrentPage
            ReplaceData(data.list);            
            ZTreeInit($("#ztree"), data.treeData);
            InitPageOption(pageIndex, pageCount);
        }
        
        //分页点击回调
        function pageClicked(page) {
            var name = $("#SearchName").val();
            var alias = $("#SearchAlias").val();
            var pId = $("#SearchPId :selected").val();
            $.post("/Manager/Category/List", { "pageIndex": page, "name": name, "alias": alias, "pId": pId }, function (data) {
                ReplaceData(data.list);
                ReplaceParent(data.parentData, "PId");
                ReplaceParent(data.parentData, "SearchPId");
            });
        }

        //#region 辅助方法
        //合理性验证
        function Validate() {
            if (!IsNullOrEmpty('Name')) { toastr.warning('请先填写姓名后再试'); return false; }
        }

        //弹框数据设置
        function SetValue(data) {
            $("#Name").val(data.Name);
            $("#Alias").val(data.Alias);
            $("#Remark").val(data.Remark);
            $("#Sort").val(data.Sort);
            $('#PId').selectpicker('val', data.PId);
            SetCheckbox('IsNavShow', data.IsNavShow);
        }
        //ztree初始化
        function ZTreeInit($tree, obj) {
            var setting = {
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };
            var tree = $.fn.zTree.init($tree, setting, obj);
            //全部展开
            tree.expandAll(true);
        }
        //#endregion
    </script>
}
